blob: a7394cae6e73a29117a86bfc94c10087e99e773b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
---
import { getCollection } from "astro:content";
import Terminal from "@layouts/Terminal.astro";
import BlogItem from "@components/BlogItem.astro";
import Link from "@components/Link.astro";
import TerminalBorder from "@components/TerminalBorder.astro";
export async function getStaticPaths() {
const blogEntries = await getCollection("blogs");
return blogEntries.map((blog) => ({
params: { slug: blog.slug },
props: { entry: blog },
}));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
const blogs = await getCollection("blogs");
const sortedBlogs = blogs.sort((a, b) => +b.data.date - +a.data.date);
const currentIndex = sortedBlogs.findIndex((blog) => blog.slug === entry.slug);
const previousBlog = sortedBlogs[currentIndex + 1] || undefined;
const nextBlog = sortedBlogs[currentIndex - 1] || undefined;
---
<Terminal path="/home/kyren/blogs/">
<div class="blog-scroll w-full h-[85svh] sm:h-[30vw] overflow-y-auto pr-[1.25vw] border-box">
<div class="text-[130%] h-full">
<div class="text-[110%]">
<BlogItem
title={entry.data.title}
description={entry.data.description ?? ""}
date={entry.data.date}
/>
</div>
<div class="markdown">
<Content components={{ a: Link }} />
</div>
<div class="mt-[1vw] px-[0.1vw] py-[0.625vw] grid grid-cols-2 gap-[1.25vw]">
{
previousBlog ? (
<TerminalBorder header="Previous Blog">
<span class="text-[var(--secondary)] truncate flex-1">
<Link href=`/blogs/${previousBlog.slug}` newTab={false}>
vim ~/blogs/{previousBlog.slug}.md
</Link>
</span>
</TerminalBorder>
) : (
<div class="min-w-0 invisible" />
)
}
{
nextBlog ? (
<TerminalBorder header="Next Blog">
<div class="w-full flex items-center">
<span class="text-[var(--secondary)] truncate flex-1">
<Link href=`/blogs/${nextBlog.slug}` newTab={false}>
vim ~/blogs/{nextBlog.slug}.md
</Link>
</span>
</div>
</TerminalBorder>
) : (
<div class="min-w-0 invisible" />
)
}
</div>
</div>
</div>
</Terminal>
<style is:global>
.markdown {
user-select: text;
font-size: 1.1rem;
}
.markdown a {
display: inline-block;
font-weight: normal;
}
.markdown code {
background: #333333;
color: var(--accent);
padding: 0 0.5em;
}
.markdown ul {
list-style-type: square;
margin-left: 1em;
margin-bottom: 1em;
font-size: 90%;
}
.markdown li {
margin-bottom: 0.5em;
}
.markdown p {
margin-bottom: 1em;
user-select: text;
}
.markdown strong {
font-weight: bold;
}
.markdown h2 {
color: var(--secondary);
font-size: 125%;
margin-bottom: 0.5em;
}
.markdown h3 {
color: var(--secondary);
font-size: 110%;
margin-bottom: 0.25em;
}
.expressive-code {
margin-bottom: 1em;
}
</style>
<script>
document.addEventListener('wheel', (e) => {
const box = document.querySelector('.blog-scroll');
if (!box) return;
// If scrolling the page itself, forward it to the box
const atTop = box.scrollTop === 0 && e.deltaY < 0;
const atBottom = box.scrollHeight - box.scrollTop === box.clientHeight && e.deltaY > 0;
if (!atTop && !atBottom) {
box.scrollTop += e.deltaY;
e.preventDefault();
}
}, { passive: false });
</script>
|
